<template>
	<view class="revaluate" v-if="CommentList[0]">
		<!-- 头部 -->
		<view class="hearder">
			<view class="pingfen">
				<text class="pin-title">综合评分</text>
				<u-rate :count="count" v-model="score" :disabled="true" active-color="#F7BD2B" inactive-color="#e5e5e5">
				</u-rate>
			</view>
			<view class="statis">
				<view :class="['all', {stactive:acindex == i}]" v-for="(item,i) in taglist" :key="i"
					@click="dotags(i,item)">
					<text class="alltxt">{{item.name}}</text>
					<text>{{item.value}}</text>
				</view>
			</view>
		</view>
		<!-- 每一项 -->
		<view class="main" v-for="(item,i) in CommentList" :key="item.id">
			<!-- 头像信息 -->
			<view class="user-box">
				<view class="left">
					<u-image :src="item.avatar" width="80rpx" height="80rpx" shape="circle"></u-image>
					<view class="time-box">
						<view class="name">{{item.username}}</view>
						<view class="time">{{item.createtime2}}</view>
					</view>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="item.grade" :disabled="true" active-color="#F7BD2B"
						inactive-color="#F7F7F7"></u-rate>
				</view>
			</view>
			<!-- 评价内容 -->
			<view class="evalue">{{item.content}} </view>
			<!-- 评价图片 -->
			<view class="img-box" v-if="item.images[0]">
				<block v-for="(items,b) in item.images" :key="b">
					<u-image class="img" border-radius="20" :src="items" width="222rpx" height="222rpx"></u-image>
				</block>
			</view>
		</view>
	</view>
	<!-- 空白页组件 -->
	<Blankpage v-else></Blankpage>
</template>

<script>
	import { ResCommentList } from '@/untils/api.js'
	import { toDate } from '@/untils/gettime.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				score: '',
				acindex: 0,
				count: 5,
				CommentList: [],
				taglist: [], // 标签
				total: '', // 总条数
				idObj: {
					id: '',
					page: 1,
					limit: 10
				},
				per_page: '', //每页显示条数
				isLoadAll: false // 节流阀
			}
		},
		onLoad(option) {
			this.idObj.id = option.id
			this.getCommentList()
		},
		// 上拉加载
		onReachBottom() {
			if (this.idObj.page * this.per_page >= this.total) return uni.$showMsg('暂无更多数据!')
			if (this.isLoadAll) return
			this.idObj.page++
			this.getCommentList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.acindex = 0
			this.idObj.type = ''
			this.idObj.page = 1
			this.getCommentList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 点击标签请求该标签下的数据
			async dotags(i, item) {
				this.acindex = i
				this.idObj.page = 1
				this.idObj.type = item.name
				if (i == 0) {
					this.idObj.type = ''
				}
				const { data: res } = await ResCommentList(this.idObj)
				this.CommentList = res.data.list.data
				this.taglist = res.data.tags
				this.total = res.data.list.total
			},
			// 请求评论列表
			async getCommentList() {
				this.isLoadAll = true // 开启节流阀
				const { data: res } = await ResCommentList(this.idObj)
				this.CommentList = [...this.CommentList, ...res.data.list.data]
				this.score = res.data.total
				this.taglist = res.data.tags
				this.total = res.data.list.total
				this.per_page = res.data.list.per_page
				this.isLoadAll = false

				this.CommentList.forEach(item => {
					item.createtime2 = toDate(item.createtime, 1)
				})
				console.log(this.CommentList)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.revaluate {
		background-color: #f7f7f7;

		.hearder {
			padding: 0 0 40rpx 32rpx;
			position: relative;
			background-color: #fff;


			.pingfen {
				margin: 30rpx 0 21rpx;

				.pin-title {
					font-size: 28rpx;
					margin-right: 10rpx;
					font-weight: 600;
				}
			}

			.statis {
				display: flex;

				.all {
					height: 46rpx;
					line-height: 46rpx;
					display: flex;
					align-items: center;
					border: 1px solid transparent;
					background: #F7F7F7;
					border-radius: 25rpx;
					margin-right: 16rpx;
					font-size: 22rpx;
					padding: 0 20rpx;


					.alltxt {
						margin-right: 10rpx;
					}
				}

				.stactive {
					background-color: #F0FFFC;
					border: 1rpx solid #01C3A8;
					box-sizing: border-box;
				}
			}

		}

		// 
		.main {
			margin-top: 18rpx;
			padding: 35rpx 40rpx 35rpx 33rpx;
			background-color: #fff;

			.user-box {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					.time-box {
						margin-left: 20rpx;

						.name {
							font-size: 28rpx;
							font-weight: 600;
						}

						.time {
							color: #9B9B9B;
							font-size: 24rpx;
						}
					}
				}

			}

			.evalue {
				margin-top: 22rpx;
			}

			.img-box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.img {
					margin: 8rpx 7rpx 0 0;
				}

				.img:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>
